<template>
  <div class="inputAlert">
    <view class='eva_content'>
      <view class='eva_left'>
        内容
      </view>
      <view class='eva_right'>
        <span @click='label' :class="eva_attitude===false ? 'labelColor':''" >功能建议</span>
        <span @click='label1' :class="eva_time===false? 'labelColor':''" >投递简历问题</span>
        <span @click='label2' :class="eva_efficiency===false?'labelColor':''" >加载不出页面</span>
        <span @click='label3' :class="eva_environment===false?'labelColor':''" >响应时间慢</span>
        <span @click='label4' :class="eva_professional===false?'labelColor':''" >其他</span>
      </view>
    </view>
    <div class="eva_row eva_text">
      <div>
          <input
            v-model='eva_opinion'
            class = "eva_input"
            maxlength='200'
            placeholder="小程序有什么反馈意见呢？大声说出你感想吧~"
            placeholder-style="font-size:30rpx"></input>
        <!-- word_count用来保存实时输入字数的长度 -->
        <label class="eva_word-count">{{eva_word_count}}/200</label>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return{
        eva_attitude: true,
        eva_time: true,
        eva_efficiency: true,
        eva_environment: true,
        eva_professional: true,

        eva_opinion: '',
        eva_word_count: 0,
      }

    },
    watch: {
      eva_opinion () {
        this.eva_word_count = this.eva_opinion.length
      },
      eva_src () {
        this.eva_img_count = this.eva_src.length
      }
    },
    methods: {
      label(){
        this.eva_attitude = !this.eva_attitude;
        if(!this.eva_attitude){
          this.eva_opinion = this.eva_opinion + " " + "功能建议" + ""
        }
      },
      label1(){
        this.eva_time = !this.eva_time;
        if(!this.eva_time){
          this.eva_opinion = this.eva_opinion + " " + "投递简历问题" + ""
        }
      },
      label2(){
        this.eva_efficiency = !this.eva_efficiency;
        if(!this.eva_efficiency){
          this.eva_opinion = this.eva_opinion + " " + "加载不出页面" + ""
        }
      },
      label3(){
        this.eva_environment = !this.eva_environment;
        if(!this.eva_environment){
          this.eva_opinion = this.eva_opinion + " " + "响应时间慢" + ""
        }
      },
      label4(){
        this.eva_professional = !this.eva_professional;
        if(!this.eva_professional){
          this.eva_opinion = this.eva_opinion + " " + "其他" + ""
        }
      },

    }


  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .eva_content
    margin-top 12rpx
    padding-top 1rpx
    font-size 30rpx
    .eva_left
      display inline-block
      width 100rpx
      line-height 100rpx
      font-size 36rpx
      float left
      margin-left 37rpx
    .eva_right
      width 610rpx
      font-size 30rpx
      float left
      color #888
      margin-left 9rpx
      span
        font-size 24rpx
        padding 13rpx 24rpx
        float left
        border 1px solid #888;
        border-radius 10rpx
        margin-right 34rpx
        margin-top 20rpx
  .eva_text
    height 110px
  .eva_row
    border-bottom 1px #E8E8E8 solid
    padding 5px 15px
    .eva_screen
      margin-bottom 32rpx
    .eva_name
      width 80%
      height 40px
      line-height 40px
    .eva_input
      width 100%
      height 85px
      font-size 14px
      padding-top 5px
      margin-top 20rpx
      display inline-block
      border-radius 30rpx
    .eva_word-count
      float right
      color #808080
    .eva_img-count
      float right
      line-height 40px
      color #808080
    .eva_add-img
      width 80px
      height 80px
    .eva_delete_parent
      display inline-block
      position relative
    .eva_delete
      width 41rpx
      height 41rpx
      position absolute
      top -18rpx
      right -5rpx
    .eva_img
      width 66px
      height 66px
      margin-bottom 7px
      margin-right 41rpx


</style>
